import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Card, theme } from 'antd';
import React from 'react';

const InfoCard: React.FC<{
  title: string;
  index: number;
  desc: string;
  href: string;
}> = ({ title, href, index, desc }) => {
  const { useToken } = theme;
  const { token } = useToken();

  return (
    <div
      style={{
        backgroundColor: token.colorBgContainer,
        boxShadow: token.boxShadow,
        borderRadius: '8px',
        fontSize: '14px',
        color: token.colorTextSecondary,
        lineHeight: '22px',
        padding: '16px 19px',
        minWidth: '220px',
        // 调整卡片宽度为父容器的三分之一减去间距
        width: 'calc(33.333% - 16px)',
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: '16px',
            color: token.colorText,
            paddingBottom: 8,
          }}
        >
          {title}
        </div>
      </div>
      <div
        style={{
          fontSize: '14px',
          color: token.colorTextSecondary,
          textAlign: 'justify',
          lineHeight: '22px',
          marginBottom: 8,
        }}
      >
        {desc}
      </div>
      <a href={href} target="_blank" rel="noreferrer">
        了解更多 {'>'}
      </a>
    </div>
  );
};

const Index: React.FC = () => {
  const { token } = theme.useToken();
  const { initialState } = useModel('@@initialState');
  return (
    <PageContainer>
      <Card
        style={{
          borderRadius: 8,
          backgroundImage:
            initialState?.settings?.navTheme === 'realDark'
              ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
              : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
        }}
      >
        <div
          style={{
            backgroundPosition: '100% -30%',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '274px auto',
            backgroundImage:
              "url('https://gw.alipayobjects.com/mdn/rms_a9745b/afts/img/A*BuFmQqsB2iAAAAAAAAAAAAAAARQnAQ')",
          }}
        >
          <div
            style={{
              fontSize: '20px',
              color: token.colorTextHeading,
            }}
          >
            欢迎使用
          </div>
          <p
            style={{
              fontSize: '14px',
              color: token.colorTextSecondary,
              lineHeight: '22px',
              marginTop: 16,
              marginBottom: 32,
              width: '65%',
            }}
          >
            Turing - AI 是依托 Chaos 架构构建的 AI SaaS 平台 ，借由 Chaos 整合 Ant Design Pro 与 SpringCloud Alibaba 微服务架构方案的优势，在先进技术底座上，为企业打造智能化、高效能的 AI 服务，助力企业便捷开展 AI 业务相关研发与应用，提升在 AI 驱动业务场景下的产品体验与运营效率 。
          </p>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              gap: 16,
            }}
          >
            <InfoCard
              index={1}
              href="https://gitee.com/JackyCui666/chaos"
              title="了解 chaos"
              desc="Chaos 是一个基于分布式、前后端分离设计的，持续集成、持续迭代，开箱即用的快速开发架构。"
            />
            <InfoCard
              index={2}
              title="了解 chaos-saas"
              href="https://gitee.com/JackyCui666/chaos-saas"
              desc="Chaos-saas 是基于 chaos 架构，使用 react ant.design 架构搭建的中台前端/设计解决方案"
            />
            <InfoCard
              index={3}
              title="了解 chaos-miniapp"
              href="https://gitee.com/JackyCui666/chaos-miniapp-taro"
              desc="chaos-miniapp-taro 是基于 chaos 架构，使用 taro taroify 架构搭建的小程序端/设计解决方案"
            />

            <InfoCard
              index={4}
              title="了解 Turing-AI"
              href="https://gitee.com/JackyCui666/turing-saas"
              desc="Turing-AI 是基于 Chaos 架构，构建的 AI SaaS 平台"
            />
            <InfoCard
              index={5}
              title="了解 turing-miniapp"
              href="https://gitee.com/JackyCui666/turing-miniapp"
              desc="turing-miniapp 是基于 chaos 架构，构建的小程序"
            />
            <InfoCard
              index={6}
              title="了解 turing-app"
              href="https://gitee.com/JackyCui666/turing-miniapp-community"
              desc="turing-app 是基于 chaos 架构，构建的App"
            />
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default Index;
